<template>
    <div class="fillcontain">
        <search-item @showDialog="showAddFundDialog" @searchList="getMoneyList" @onBatchDelMoney="onBatchDelMoney"></search-item>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                align='center'
                @select="selectTable"
                @select-all="selectAll"
                >
            <el-table-column
                type="selection"
                align='center'
                width="60">
            </el-table-column>
              <el-table-column
                prop="mobile"
                label="手机号"
                align='center'
                width="180">
            </el-table-column>
              <el-table-column
                prop="amount"
                label="提现金额"
                align='center'
                >
            </el-table-column>
            <el-table-column
                prop="way"
                label="提现方式"
                align='center'
                >
                 <template slot-scope="">  
                    <span >
                        银行卡
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="card_no"
                label="银行卡号"
                align='center'
                sortable
                width="170">
            </el-table-column>
             <el-table-column
                prop="name"
                label="持卡人姓名"
                align='center'
                sortable
                width="120">
            </el-table-column>
            <el-table-column
                prop="card_no"
                label="手续费"
                align='center'
                width="130"
                >
                <template slot-scope="">  
                    <span >
                        0
                    </span>
                </template>
            </el-table-column>
            
            <el-table-column
                prop="status"
                label="状态"
                align='center'
                sortable> 
                  <template slot-scope="scope">  
                    <span >
                        {{ scope.row.status == 0?'未打款':(scope.row.status == 1?'已打款':'已拒绝') }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="add_time"
                label="添加时间"
                align='center'
                sortable>
            </el-table-column>
            
            <el-table-column
                prop="operation"
                align='center'
                label="操作"
                width="150">
                <template slot-scope='scope'>
                    
                    <el-button 
                        icon='delete' 
                        v-if="scope.row.status == 0"
                        size="mini"
                        @click='handle(scope.row,true)'
                    >打款</el-button>
                     <el-button 
                        icon='delete'
                        v-if="scope.row.status == 0" 
                        size="mini"
                        @click='handle(scope.row,false)'
                    >拒绝</el-button>
					
                </template>
            </el-table-column>
            </el-table>
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>
            <addFundDialog  
				v-if="addFundDialog.show"
				 :isShow="addFundDialog.show" 
				 :dialogRow="addFundDialog.dialogRow"  
				 @getFundList="getMoneyList"  
				 @closeDialog="hideAddFundDialog">
			</addFundDialog>
		</div>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import * as mutils from '@/utils/mUtils'
    import SearchItem from "./components/searchItem";
    import AddFundDialog from "./components/addFundDialog";
    import Pagination from "@/components/pagination";
    import { list, handleMoney } from "@/api/finance";

    export default {
        data(){
            return {
                tableData: [],
                tableHeight:0,
                loading:true,
                idFlag:false,
                isShow:false, // 是否显示资金modal,默认为false
                editid:'',
                rowIds:[],
                sortnum:0,
                addFundDialog:{  
                    show:false,
                    dialogRow:{}
                },
                incomePayData:{
                    page:1,
                    limit:10,
                    name:''
                },
                pageTotal:0,
            }
        },
        components:{
            SearchItem,
            AddFundDialog,
            Pagination,
        },
        computed:{
            ...mapGetters(['search'])
        },
      	mounted() {
            this.getMoneyList();
	   },
	   methods:{
            handle(row, type) {
                let text = type?'打款': '拒绝打款';
                 this.$confirm(`确认${text}吗?`, '提示', {
                    type: 'warning'
                })
                .then(() => {
                    let param = {withdrawalId: row.id, status: type? 1: 2};
                    handleMoney(param).then(res => {
                        this.$message({
                            message: `${text}成功`,
                            type: 'success'
                        })
                        this.getMoneyList()
                    })
                })
                .catch((error) => {
                    console.log(error);
                })
            },
            setTableHeight(){
                this.$nextTick(() => {
                   this.tableHeight =  document.body.clientHeight - 300
                })
            },
            // 获取资金列表数据
            getMoneyList(){
                const para = Object.assign({},this.incomePayData,this.search);
                para.beginTime =para.beginTime? new Date(para.beginTime).getTime():'';
                para.endTime =para.endTime? new Date(para.endTime).getTime():'';
                list(para).then(res => {
                     this.loading = false;
                     this.pageTotal = res.data.total
                     this.tableData = res.data.list
                }).catch(error  => {
                    console.log(error);
                    this.loading = false;
                })
            },
            // 显示资金弹框
            showAddFundDialog(val){
                this.$store.commit('SET_DIALOG_TITLE', val)
                this.addFundDialog.show = true;
            },
            hideAddFundDialog(){
                this.addFundDialog.show = false;
            },
            // 上下分页
            handleCurrentChange(val){
                this.incomePayData.page = val;
                this.getMoneyList()
            },
            // 每页显示多少条
            handleSizeChange(val){
                this.incomePayData.limit = val;
                this.getMoneyList()
            },
            getPay(val){
               if(mutils.isInteger(val)){
                   return -val;
               }else{
                   return val;
               }
            },
            /**
            * 格式化状态
            */
            formatterType(item) {
                const type = parseInt(item.incomePayType);
                return this.format_type_list[type];
            },
            filterType(value, item) {
                const type = parseInt(item.incomePayType);
                return this.format_type_list[value] == this.format_type_list[type];
            },
            // 编辑操作方法
            onEditMoney(row){
                this.addFundDialog.dialogRow = {...row};
                this.showAddFundDialog();
            },
            // 删除数据
            onDeleteMoney(row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    const para = { id: row.id }
                    removeMoney(para).then(res => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getMoneyList()
                    })
                })
                .catch(() => {})
            },
            onBatchDelMoney(){
                this.$confirm('确认批量删除记录吗?', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    const ids = this.rowIds.map(item => item.id).toString()
                    const para = { ids: ids }
                    batchremoveMoney(para).then(res => {
                        this.$message({
                            message: '批量删除成功',
                            type: 'success'
                        })
                        this.getMoneyList()
                    })
                })
                .catch(() => {})
            },
            // 当用户手动勾选数据行的 Checkbox 时触发的事件
            selectTable(val, row){
                this.setSearchBtn(val);
            },
            // 用户全选checkbox时触发该事件
            selectAll(val){
                 val.forEach((item) => {
                     this.rowIds.push(item.id);
                });
                this.setSearchBtn(val);
            },
            setSearchBtn(val){
                let isFlag = true;
                if(val.length > 0){
                    isFlag = false;
                }else{
                    isFlag = true;
                }
                this.$store.commit('SET_SEARCHBTN_DISABLED',isFlag);
            }
        },
    }
</script>

<style lang="less" scoped>
    .table_container{
        padding: 10px;
        background: #fff;
        border-radius: 2px;
    }
    .el-dialog--small{
       width: 600px !important;
    }
    .pagination{
        text-align: left;
        margin-top: 10px;
    }
     
</style>


